<template>
  <el-dialog :visible.sync="dialogVisible" width="600px" top="5vh">
    <div slot="title" style="text-align: right; margin-right: 30px;">
      <el-button type="primary" v-print="printObj">打 印</el-button>
    </div>
    <div id="content" class="p3">
      <div class="flex items-center">
        <img :src="logo" height="35px" class="mr1" alt="logo">
        <span style="color: rgb(51, 153, 255);">儿童青少年近视自动筛查防控平台</span>
      </div>
      <div class="mt1 flex flex-center">
        <span style="font-weight: 700; font-size: 20px;">眼健康档案</span>
      </div>
      <div class="mt2 flex justify-between pb1" style="border-bottom: 1px solid black;">
        <div><span>姓名： {{ rowData.patient_info.name }}</span></div>
        <div><span>性别： {{ rowData.patient_info.gender_label }}</span></div>
        <div><span>年龄： {{ rowData.age }}</span></div>
        <div><span>出生日期： {{ rowData.patient_info.birth }}</span></div>
      </div>
      <div class="p1">
        <div class="mt1">
          <span style="font-size: 18px;">患者信息</span>
          <div class="border mt1" style="line-height: 26px;">
            <!--            <div class="flex">-->
            <!--              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">-->
            <!--                <span>基本信息</span>-->
            <!--              </div>-->
            <!--              <div class="flex flex-wrap" style="width: 70%;">-->
            <!--                <div class="borderBottom borderRight" style="width: 49.8%;">-->
            <!--                  <span class="ml1">身高：</span><span></span></div>-->
            <!--                <div class="borderBottom" style="width: 49.8%;">-->
            <!--                  <span class="ml1">体重：</span><span></span>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>裸眼视力</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼裸眼视力：</span><span>{{ rowData.OS_VASC }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼裸眼视力：</span><span>{{ rowData.OD_VASC }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>矫正视力</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼矫正视力：</span><span>{{ rowData.OS_VACC }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼矫正视力：</span><span>{{ rowData.OD_VACC }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>屈光度</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼球镜DS：</span><span>{{ rowData.OS_Sph }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">左眼柱镜DC：</span><span>{{ rowData.OS_Cyl }}</span>
                </div>
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼轴位Axis：</span><span>{{ rowData.OS_Axis }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼球镜DS：</span><span>{{ rowData.OD_Sph }}</span>
                </div>
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">右眼柱镜DC：</span><span>{{ rowData.OD_Cyl }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼轴位Axis：</span><span>{{ rowData.OD_Axis }}</span>
                </div>

              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>眼轴Al</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">右眼眼轴AL：</span><span>{{ rowData.OS_AL }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">左眼眼轴AL：</span><span>{{ rowData.OD_AL }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center  borderBottom borderRight" style="width: 30%;">
                <span>角膜曲率</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼角膜曲率：</span><span></span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼角膜曲率：</span><span></span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>角膜厚度</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼角膜厚度(μm)：</span><span></span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼角膜厚度(μm)：</span><span></span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderBottom borderRight" style="width: 30%;">
                <span>眼压</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="borderBottom borderRight" style="width: 49.8%;">
                  <span class="ml1">左眼眼压：</span><span>{{ rowData.OS_IOP }}</span>
                </div>
                <div class="borderBottom " style="width: 49.8%;">
                  <span class="ml1">右眼眼压：</span><span>{{ rowData.OD_IOP }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>其它</span>
              </div>
              <div class="flex flex-wrap borderBottom " style="width: 70%;">
                <div class="borderRight" style="width: 49.8%;">
                  <span class="ml1">备注：</span><span>{{ rowData.desc }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight borderBottom" style="width: 30%;">
                <span>结论</span>
              </div>
              <div class="flex flex-wrap borderBottom " style="width: 70%;">
                <div class="">
                  <span>{{ rowData.conclusion }}</span>
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="flex flex-center borderRight " style="width: 30%;">
                <span>建议</span>
              </div>
              <div class="flex flex-wrap" style="width: 70%;">
                <div class="">
                  <span>{{ rowData.suggest }}</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="mt1 flex justify-between" style="border-top: 1px solid black;margin-top: 20px">
        <div><span>医生：{{ rowData.doctor_name }}</span></div>
        <div><span>建档时间：{{ rowData.create_time }}</span></div>
      </div>
      <div class="mt1" style="  text-align: right;"><span>打印日期：{{ current_time }}</span></div>
    </div>
  </el-dialog>
</template>

<script>
import Print from 'vue-print-nb'
import {getReportById} from "@/api";
import logo from "@/assets/logo.png";

export default {
  name: "print",
  directives: {
    Print
  },
  props: {
    reportId: {
      type: Number
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val)
      }
    },
    current_time() {
      function formatDate(time = new Date()) {
        let date = new Date(time);
        let YY = date.getFullYear();
        let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        // let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        // let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        // let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

        // 这里修改返回时间的格式
        // return YY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
        return YY + "-" + MM + "-" + DD;
      }

      return formatDate();
    }
  },
  data() {
    return {
      printObj: {
        id: 'content',

      },
      logo: logo,
      rowData: {
        "id": undefined,
        "school_name": undefined,
        "hospital_name": undefined,
        "report_type_label": undefined,
        "patient_name": undefined,
        "doctor_name": undefined,
        "patient_info": {
          "id": undefined,
          "gender_label": undefined,
          "name": undefined,
          "id_card": undefined,
          "phone": undefined,
          "gender": undefined,
          "birth": undefined,
          "parent_name": undefined,
          "parent_phone": undefined,
          "openid": undefined,
          "status": undefined,
          "create_time": undefined,
          "update_time": undefined,
          "creator": undefined
        },
        "number": undefined,
        "age": undefined,
        "report_type": undefined,
        "stage": undefined,
        "grade": undefined,
        "is_myopia": undefined,
        "OS_VASC": undefined,
        "OD_VASC": undefined,
        "OS_VACC": undefined,
        "OD_VACC": undefined,
        "OS_Sph": undefined,
        "OD_Sph": undefined,
        "OS_Cyl": undefined,
        "OD_Cyl": undefined,
        "OS_Axis": undefined,
        "OD_Axis": undefined,
        "OS_AL": undefined,
        "OD_AL": undefined,
        "OS_PD": undefined,
        "OD_PD": undefined,
        "OS_SE": undefined,
        "OD_SE": undefined,
        "OS_IOP": undefined,
        "OD_IOP": undefined,
        "glasses_type": undefined,
        "other": undefined,
        "conclusion": undefined,
        "suggest": undefined,
        "description": undefined,
        "create_time": undefined,
        "update_time": undefined,
        "doctor": undefined,
        "batch": undefined,
        "patient": undefined,
        "creator": undefined
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(row) {
      getReportById(this.reportId).then(res => {
        this.rowData = res.data;
      })
    },

  }
}
</script>

<style scoped>

.p3 {
  padding: 0 20px 60px 20px;
}

.flex {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.items-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.mt1 {
  margin-top: .5rem;

}

.mr1 {
  margin-right: .5rem;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.justify-between {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.pb1 {
  padding-bottom: .5rem;
}

.mt2 {
  margin-top: 1rem;
}

.p1 {
  padding: .5rem;
}

.border {
  border-style: solid;
  border-width: 1px;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.borderRight {
  border-right: 1px solid #000;
}

.borderBottom {
  border-bottom: 1px solid #000;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ml1, .mx1 {
  margin-left: .5rem;
}
</style>